<template>
  <div class="complaint">
    <div class="main">
      <h3>内容</h3>
      <textarea class="border-address" v-model="textarea" placeholder="最多可输入1000个字" maxlength="1000"
                ref="text"></textarea>
    </div>
    <div class="release border-bottom">
      <LargerVersion @show="closeShow" v-if="show" :idx="imageIndex" :arrImg="imgList"></LargerVersion>
      <h3>上传图片</h3>
      <ul>
        <li class="upload border-top border-bottom border-left-right" @click="upload($refs.upload)">
          <i class="icon-add"></i>
          <input type="file" hidden class="upload-file" ref="upload"
                 @change="imgUpload($refs.upload)"
                 accept="image/*" multiple>
        </li>
        <li class="imgList" v-for="(item,index) in imgList">
          <img :src="item.path" @click="showLarger(index)">
          <span class="icon-close" @click="delUploadImg(index)"></span>
        </li>
        <li class="loading" v-show="loading">
          <img src="~common/image/loading.gif">
        </li>
      </ul>
    </div>
    <div class="footer" @click="submit">确定提交</div>
  </div>
</template>

<script>
  import {startUpload} from 'common/js/imgUpload'
  import LargerVersion from 'components/largerVersion/largerVersion'
  import {GoodsComplaint, isLogin} from 'common/js/user'

  export default {
    data() {
      return {
        imgList: [],
        imageIndex: 1,
        show: false,
        loading: false,
        textarea: ''
      }
    },
    mounted() {
      document.title = '投诉';
      //判断是否登录
      isLogin().then(res => {
        if (Number(res.status) < 0) {
          this.$dialog.alert({
            mes: res.expand.info,
            callback: () => {
              this.$router.push('/login');
            }
          });
        }
      })
    },
    methods: {
      //提交
      submit() {
        var imgId = ''//产品图片
        for (var i = 0; i < this.imgList.length; i++) {
          imgId += this.imgList[i].id + ',';
        }
        if (this.textarea === '') {
          this.$dialog.toast({
            mes: '请输入投诉内容',
            timeout: 1000,
            callback: () => {
              this.$refs.text.focus();
            }
          });
        } else {
          GoodsComplaint({
            "phpsid": localStorage.getItem('token'),//session_id
            "goods_id": this.$route.params.id,//商品id
            "content": this.textarea,//投诉内容
            "imgs_id": imgId.substr(0, imgId.length - 1),//图片id
          }).then(res => {
            if (res.status === 1) {
              this.$dialog.toast({
                mes: '投诉成功',
                timeout: 1000,
                callback: () => {
                  window.history.go(-1)
                }
              });
            }
          })
        }

      },
      //显示大图
      showLarger(idx) {
        this.imageIndex = idx;
        this.show = true;
      },
      //关闭显示大图
      closeShow() {
        this.show = false;
      },
      //删除上传图片
      delUploadImg(index) {
        this.$dialog.confirm({
          title: '删除该图片？',
          mes: '',
          opts: () => {
            this.imgList.splice(index, 1);
            var obj = JSON.stringify(this.imgList);
            localStorage.setItem("imgList", obj);
          }
        });
      },
      //选中图片上传
      imgUpload(item) {
        this.loading = true;
        startUpload(item.files[0]).then(res => {
          if (res.status === 1) {
            this.imgList.push({
              id: res.img_id,
              path: res.path
            })
            this.loading = false;
            var obj = JSON.stringify(this.imgList);
            localStorage.setItem("imgList", obj);
          }
        })
      },
      //点击上传图片
      upload(item) {
        //判断是否是苹果，如果是删除capture属性
        var ua = navigator.userAgent.toLowerCase();
        var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
        if (isIos) {
          item.removeAttribute('capture')
        }
        if (this.imgList.length < 9) {
          //点击input上传
          item.click();
        } else {
          this.$dialog.alert({mes: '最多上传9张图片'});
        }
      },
    },
    components: {
      LargerVersion
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .main
    padding: 0 .5rem;
    background: $background-f;
    color: $color-text;
    h3
      font-size: .45rem;
      line-height: 1.3rem;
    textarea
      padding: 2%;
      width: 100%;
      resize: none;
      height: 3.2rem;

  .release
    min-height: 3rem;
    background-repeat: no-repeat;
    background-size: 2.13rem;
    background-position: center center;
    color: $color-text;
    background: $background-f;
    h3
      padding: 0 .5rem;
      font-size: .45rem;
      line-height: 1.3rem;
    .pic
      min-height: 3.8rem;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      span
        display: inline-block;
      img
        width: 2.13rem;
    .release-box
      min-height: 3.8rem;
    ul
      padding: 0 .31rem;
      overflow: hidden;
      background: $background-f;
      li
        float: left;
        margin: .2rem;
        img
          display: block;
          width: 2.1rem;
          height: 2.1rem;
      .upload
        width: 2.1rem;
        height: 2.1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        font-size: 1rem;
        text-align: center;
        color: $color-code;
        i
          margin-top: .2rem;
        p
          width: 100%;
          font-size: .45rem;
    .imgList
      position: relative;
      .icon-close
        position: absolute;
        top: -.2rem;
        right: -.2rem;
        background: $color-main;
        color: $color;
        padding: .1rem;
        border-radius: 50%;

  .footer
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: $background-btn;
    line-height: 1.38rem;
    text-align: center;
    font-size: .54rem;
    color: $color;
</style>
